

<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/common.css">
<style>
    .table-body-custom {
        overflow-y: auto;
        color: #444;
        margin-left: 15px;
        border: 1px solid #E6E6E6;
        border-bottom: none;
    }

    .custom-header {
        border-bottom: 1px solid #E6E6E6;
        display: flex;
        height: 32px;
        justify-content: space-around;
        align-items: center;
        padding: 0 18px;
        background: #F9F9F9;
    }

    .el-input,
    .el-input .el-input__inner {
        height: 34px;
        line-height: 34px;
    }


    /* radio */
    .el-radio__input.is-checked+.el-radio__label,.el-checkbox__input.is-checked+.el-checkbox__label {
        color: #7438D5;
    }

    .el-radio__input.is-checked .el-radio__inner,.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background: #7438D5;
        border-color: #7438D5;
    }

    .el-radio {
        color: #666;
        font-size: 13px;
    }
    .el-checkbox{
        color: #444;
        font-size: 13px;
    }

    .custom-item-with {
        width: 180px;
    }

    .express-table {
        display: flex;
        align-items: center;
        height: 59px;
        padding: 0 18px;
        border-bottom: 1px solid #E6E6E6;
    }

    .custom-item-area {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .express-table .el-input,
    .express-table .el-input .el-input__inner {
        width: 140px;
    }
    [v-cloak] {
        display: none
    }
</style>
<script src="__CDN__/assets/addons/shopro/libs/vue.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/element/element.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/moment.js"></script>
<div class="panel panel-default panel-intro" id="receiveDetail" v-cloak>
    {:build_heading()}

    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
	        <el-form :model="detailData" :rules="rulesList" ref="detailData" label-width="108px" class="detail-form">
		        <el-form-item label="已选优惠券：" prop="youhuilist">
		        </el-form-item>
		        <div class="table-body-custom">
			        <div class="custom-header">
				        <div  class="custom-item-with">
					        优惠券名称
				        </div>
				        <div class="custom-item-with">
					       优惠券金额
				        </div>
				        <div class="custom-item-with">
					       剩余数量
				        </div>
				        <div class="custom-item-with">
					        发放数量
				        </div>
				        <div class="custom-item-with"  style="margin-left: 10px">
					       操作
				        </div>
			        </div>
			        <div class="custom-body">
				        <div v-for="(item,index) in youhuiList" class="express-table">
					        <div class="custom-item-with">
						        {{item.name}}
					        </div>
					        <div class="custom-item-with">
						        {{item.amount}}
					        </div>
					        <div class="custom-item-with">
						        {{item.stock}}
					        </div>
					        <div class="custom-item-with">
						        <el-input type="number" min="1" v-model="item.num"></el-input>
					        </div>
					        <div class="custom-item-with" style="margin-left: 10px" @click="deletitem(item,index)">
						       <div style="color: #00b3ee">删除</div>
					        </div>
				        </div>
			        </div>
		        </div>
		        <el-form-item label="选择发送对象：" prop="type">
			        <el-radio-group v-model="detailData.type">
				        <el-radio label="group">按用户组</el-radio>
				        <el-radio label="user">按特定用户</el-radio>
			        </el-radio-group>
		        </el-form-item>
		        <el-form-item label="发放用户：" prop="mobile" v-if="detailData.type==='user'">
			        <el-input  type="textarea"
			                    placeholder="请输入内容"
			                    v-model="detailData.mobile" placeholder="输入电话号码 用，分割 例如:19238988789,18345789878"
			        ></el-input>
		        </el-form-item>
		        <el-form-item label="选择用户组："  prop="group_ids" v-if="detailData.type==='group'">
			        <el-checkbox-group v-model="detailData.group_ids">
				        <el-checkbox v-for="(items,indexs) in qunzuList" :label="items.id"  :key="indexs">{{ items.name }}</el-checkbox>
			        </el-checkbox-group>
		        </el-form-item>

		        <el-form-item label="发券原因：">
			        <el-input  type="textarea"
			                   placeholder="请输入内容"
			                   v-model="detailData.yuanyin" placeholder=""
			        ></el-input>
		        </el-form-item>
	        </el-form>
	        <div class="dialog-footer display-flex">
		        <div @click="submit" class="dialog-cancel-btn display-flex-c cursor-pointer">取消</div>
		        <div @click="submit('yes','detailData')" class="dialog-define-btn display-flex-c cursor-pointer">确定</div>
	        </div>

        </div>
    </div>
</div>